<template>
	<view>
		<view class="fixed">
			<u-search placeholder="输入维修编号进行查询" :showAction="false" v-model="page.repairCode"
				@search="getStatus"></u-search>
		</view>
		<view class="screen">
			<view class="state location" @click="open">
				<span>{{statusText}}</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
			<view class="extent location">
				<span>紧急程度</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
			<!-- <view class="place location" @click="location"> -->
			<view class="place location">
				<span>所在位置</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
		</view>

		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="formData.length == 0">
			<!-- <image src="../../../static/images/index/kongshuju.png" mode=""></image> -->
		</u-empty>
		<view class="" v-else>
			<template>
				<view class="state-box" v-for="(item,index) in formData" :key="index">
					<view class="bottom" @click="details(item.repairId)">
						<view class="headline">
							{{item.machineryName}}
						</view>
						<view class="information">
							维修编号：{{item.repairCode}}
						</view>
						<view class="information">
							设备型号：{{item.machinerySpec}}
						</view>
						<view class="information">
							报修时间：{{item.requireDate}}
						</view>
						<view class="" style="display: flex;">
							<view
								:class="{FINISHED:item.status == '已完成',VERIFYING:item.status == '待验证',REPAIRING:item.status == '待维修',RECEIVING:item.status == '待接收',PREPARE:item.status == '草稿'} "
								id="state-show">
								<text>{{item.status}}</text>
							</view>
							<view v-if="item.status == '已完成'"
								:class="{ERROR:item.repairResult == 'ERROR',SUCCESS:item.repairResult == 'SUCCESS'} "
								id="state-show">
								<text> {{item.repairResult == 'ERROR' ? '未修复' : '已修复'}} </text>
							</view>
						</view>
					</view>
					<template>
						<view class="verification button-da" @click="openverify(item.repairId)"
							v-if="item.status == '待验证'">
							验证
						</view>
						<view class="" style="display: flex;justify-content: space-between;"
							v-if="item.status == '待维修'">
							<view class="report button-da" @click="details(item.repairId)">
								维修汇报
							</view>
							<view class="send-back button-xiao" @click="sendBacks(item.repairId)">
								退回
							</view>
						</view>
						<view class="" style="display: flex;justify-content: space-between;"
							v-if="item.status == '待接收'">
							<view class="report button-da" @click="jieshou(item.repairId)">
								接收
							</view>
							<view class="dispatch button-xiao" @click="paigong(item.repairId)">
								派工
							</view>
						</view>
					</template>
				</view>
			</template>
		</view>

		<!-- --------------------- -->
		<!-- 弹出层 -->
		<u-popup :show="show" mode="center" @close="close">
			<template>
				<view class="popup-header">
					维修状态
				</view>
				<view class=""
					style="display: flex; justify-content: space-between;margin: 60rpx 32rpx 0 32rpx;flex-wrap: wrap;">
					<view class="u-page__tag-item" v-for="(item, index) in status" :key="index">
						<u-tag :text="item.dictLabel" :plain="!item.checked" type="warning" :name="index" @click="radioClick">
						</u-tag>
					</view>
				</view>

				<!-- 确定按钮 -->
				<view class="button" @click="selectState">
					确定
				</view>
			</template>
		</u-popup>
		<!-- ---------------------------- -->
		<!-- 退回 -->
		<u-popup :show="sendBack" mode="center" @close="close">
			<template class="">
				<view class="popup-header" style="margin-bottom: 12rpx;">
					退回原因
				</view>
				<view class="" style="height: 276rpx;margin: 26rpx 32rpx 48rpx 32rpx;">
					<u--textarea v-model="back.backReason" placeholder="请填写退回原因" maxlength="250"
						height="138"></u--textarea>
				</view>
				<view class="two-button">
					<view class="button-left" @click="close">
						取消
					</view>
					<view class="button-right" @click="tuihui">
						确定
					</view>
				</view>
			</template>
		</u-popup>
		<!-- 所在位置 -->
		<u-popup :show="show1" mode="center" @close="close" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					所在位置
				</view>
				<view class="search">
					<u-search placeholder="位置名称" v-model="keyword"></u-search>
				</view>
				<view class="container">
					<u-radio-group v-model="workshopId" placement="column" shape="circle" iconPlacement="right"
						activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in Workshop" :key="index"
							:label="item.workshopName" :name="item.workshopId">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button">
					确定
				</view>
			</template>
		</u-popup>
		<!-- 验证 -->
		<u-popup :show="verify" mode="center" @close="close">
			<template>
				<view class="popup-header">
					验证
				</view>
				<view class="verify">
					<u--form labelPosition="left" :model="verifyObj" ref="uForm" :labelWidth="180"
						:labelStyle="{textAlign: 'center',paddingLeft:'38rpx'}">
						<u-form-item label="是否修复" :required="true">
							<u-radio-group v-model="verifyObj.repairResult" placement="row" iconPlacement="right"
								activeColor="#38DEFF">
								<u-radio :customStyle="{marginBottom: '16rpx'}" v-for="(item, index) in radiolist1"
									:key="index" :label="item.name" :name="item.state" @change="radioChange">
								</u-radio>
							</u-radio-group>
						</u-form-item>

					</u--form>
				</view>

				<view class="" style="margin: 0 32rpx;">
					<view class="" style="margin-bottom: 8rpx;color: rgba(32, 37, 64, 1);">
						备注
					</view>
					<u--textarea v-model="verifyText.remark" placeholder="" maxlength="150"></u--textarea>
				</view>

				<view class="two-button">
					<view class="button-left" @click="close">
						取消
					</view>
					<view class="button-right" @click="confirm">
						确定
					</view>
				</view>
			</template>
		</u-popup>
		<!-- 接收 -->
		<u-popup :show="accept" mode="center" @close="close" style="height: 512rpx;">
			<template>
				<view class="popup-header" style="margin-bottom: 50rpx;">
					提示
				</view>
				<image src="../../../static/images/index/gantanhao.png"
					style="width: 96rpx;height: 96rpx;margin: 0 auto;" mode=""></image>
				<view class="" style="font-size: 32rpx;text-align: center;color: #202540;margin-top: 32rpx;">
					确定接收吗?
				</view>
				<view class="" style="font-size: 24rpx;color: #cdced4;margin-top: 32rpx;text-align: center;">
					确定后，您将作为维修人，对保修单进行维修结果的汇报！
				</view>
				<view class="button" @click="reception">
					确定
				</view>
			</template>
		</u-popup>
		<!-- 派工 -->
		<u-popup :show="dispatch" mode="center" @close="close" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					派工
				</view>
				<view class="search">
					<u-search placeholder="位置名称" v-model="keyword"></u-search>
				</view>
				<view class="container">
					<u-radio-group v-model="workData.acceptedBy" placement="column" shape="circle" iconPlacement="right"
						activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in work" :key="index"
							:label="item.userName" :name="item.userId">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button" @click="pgqd">
					确定
				</view>
			</template>
		</u-popup>
	</view>
</template>

<script>
	import {
		getStatus,
		getRepair,
		reception,
		work,
		putWork,
		sendBack,
		putVerify
	} from '@/api/facilityMaintain/index.js'
	import {
		getWorkshop
	} from '@/api/mes/mes.js'
	import {
		getDicts
	} from "@/api/system/dict/data"
	export default {
		data() {
			return {
				repairId: '', //接收得id
				statusText: '维修状态',
				index: '', //状态
				status:[],
				formData: [],
				total: "",
				page: {
					repairCode: '', //维修编号
					status: '待验证',
					pageNum: 1,
					pageSize: 10,
				}, //页码数
				// 派工名单
				work: [],
				workData: {},
				workTotal: '',
				workPage: {
					pageNum: 1,
					pageSize: 10
				},
				// 车间
				Workshop: [],
				// 车间id
				workshopId: '',
				radiolist1: [{
						name: '否',
						state: 'ERROR',
						disabled: false
					},
					{
						name: '是',
						state: 'SUCCESS',
						disabled: false
					}
				],
				back: {
					backReason: '',
					repairId: ''
				},
				verifyText: '',
				verifyObj: {
					repairId: '',
					repairResult: 'SUCCESS',
					remark: ''
				}, //提交验证
				dispatch: false, //派工
				accept: false, //接收弹出层
				sendBack: false, //退回弹出层
				verify: false, //验证弹出层
				show1: false, //所在位置弹出层
				show: false, //弹出层
				keyword: '',
			}
		},
		onShow() {
			// this.getStatus()
		},
		created() {

		},
		onLoad(options) {
			this.page.status = options.state
			this.getStatus()
		},
		methods: {
			// 验证
			confirm() {
				console.log(this.verifyObj);
				putVerify(this.verifyObj).then(res => {
					uni.showToast({
						title: '验证成功！',
						icon: 'none'
					})
					this.close()
					this.getStatus()
				})
			},
			// 打开验证
			openverify(repairId) {
				this.verify = true
				this.verifyObj.repairId = repairId
			},
			// 退回确定按钮
			tuihui() {
				if (this.back.backReason.length >= 1) {
					sendBack(this.back).then(res => {
						uni.showToast({
							title: '退回成功！',
							icon: 'none'
						})
						this.close()
						this.getStatus()
					})
				} else {
					uni.showToast({
						title: '请填写退回原因！',
						icon: 'none'
					})
				}
			},
			// 退回
			sendBacks(id) {
				this.sendBack = true
				this.back.repairId = id
			},
			// 派工确定按钮
			pgqd() {
				console.log(this.workData);
				putWork(this.workData).then(res => {
					uni.showToast({
						title: '派工成功！',
						icon: 'none'
					})
					this.getStatus()
					this.close()
				})
			},
			// 打开派工
			paigong(id) {
				this.dispatch = true
				this.workData.repairId = id
			},
			// 接收确定
			reception() {
				reception(this.repairId).then(res => {
					uni.showToast({
						title: '接收成功！',
						icon: 'none'
					})
					this.getStatus()
					this.close()
				})
			},
			// 接收
			jieshou(id) {
				this.accept = true
				this.repairId = id
			},
			// 根据状态获取维修单
			getStatus() {
				this.status = []
				// 状态
				getDicts('repair_status').then(zt=>{
					zt.data.forEach(item =>{
						this.status.push({dictValue:item.dictValue,dictLabel:item.dictLabel,checked: false})
					})
				})
				getStatus(this.page).then(res => {
					res.rows.forEach(item => {
						this.status.forEach(data => {
							if (item.status == data.dictValue) {
								item.status = data.dictLabel
							}
						})
					})
					this.formData = res.rows
					this.total = res.total
				})
				// 派工名单
				work(this.workPage).then(options => {
					this.workTotal = options.total
					this.work = options.rows
				})
				// 车间
				getWorkshop().then(shop => {
					this.Workshop = shop.data
				})

				
			},

			radioChange(e) {
				this.verifyObj.repairResult = e
			},
			// 跳转去详情界面
			details(repairId) {
				uni.navigateTo({
					url: `/pages/facilityMaintain/details/index?repairId=${repairId}`
				})
			},
			// 关闭弹出层
			close() {
				this.show = false
				this.show1 = false
				this.verify = false
				this.sendBack = false
				this.accept = false
				this.dispatch = false
				this.verifyObj = {
					repairId: '',
					repairResult: 'SUCCESS',
					remark: ''
				}
			},
			// 打开弹出层
			open() {
				this.show = true
			},
			// 弹出层标签点击事件(状态)
			radioClick(name) {
				this.status.map((item, index) => {
					 item.checked =  index === name ? true : false
				})
				this.index = name
			},
			// 状态确定按钮
			selectState() {
				this.close()
				this.page.status = this.status[this.index].dictValue
				this.statusText = this.status[this.index].dictLabel
				this.getStatus()
			},
			// 所在位置弹出层
			location() {
				this.show1 = true
			},
			// 上拉加载
			onReachBottom() {
				//触发了上拉加载，请求下一页（10）条数据
				let allTotal = this.page.pageNum * this.page.pageSize
				if (allTotal < this.total) {
					// 判断当前条数小于总条数
					this.page.pageNum++
					this.getStatus()
				} else {
					uni.showToast({
						title: '已加载全部数据！',
						icon: 'none'
					})
				}

			},

			// 下拉刷新
			onPullDownRefresh() {
				this.page.repairCode = ''
				this.page.pageNum = 1
				this.page.pageSize = 10
				this.formData = []
				// 调用获取数据的方法
				this.getStatus()
				setTimeout(() => {
					// 结束下拉刷新
					uni.stopPullDownRefresh();
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup {
		height: 0 !important;
	}

	::v-deep .weizi {
		.u-radio {
			margin-bottom: 48rpx !important;
		}
	}

	::v-deep .u-popup__content {}

	.container {
		height: 466rpx;
		/* 设置容器的固定高度 */
		overflow: auto;
		/* 添加滚动条 */
	}


	// 多选框得边框颜色
	::v-deep .u-radio__icon-wrap--circle {
		border-color: rgba(56, 175, 255, 1) !important;
	}

	::v-deep .u-radio-group--column {
		padding: 0 32rpx;
	}

	.search {
		padding: 0 32rpx 12rpx 32rpx;
		box-shadow: 0px 2rpx 4rpx rgba(32, 37, 64, 0.06);
		margin-bottom: 48rpx;
	}

	.button {
		margin: 50rpx auto;
		width: 490rpx;
		height: 64rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
		font-size: 32Rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 64rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.popup-header {
		margin: 0 32rpx 24rpx 32rpx;
		border-bottom: 0.5px solid #f2f2f4;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(32, 37, 64, 1);
	}

	// -------------------------------
	// 弹出层样式
	.u-page__tag-item {
		display: flex;
	}

	.u-transition {
		// padding: 24rpx !important;
	}

	::v-deep .u-page__tag-item {
		width: 160rpx !important;
		display: inline-block !important;

		uni-view {
			justify-content: center !important;
		}
	}

	::v-deep .u-tag--warning--plain {
		// border-radius: 12rpx;
		width: 160rpx !important;
		border: 0rpx solid #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag--warning {
		// opacity: 0.1;
		background-color: #fff !important;
		border-width: 1px !important;
		border-color: #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag__text--warning {
		color: #38d6ff !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag--square {
		width: 160rpx !important;
		border-radius: 6px !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag__text--warning--plain {
		color: #202540 !important;
		font-size: 32rpx !important;
		margin: 0 auto !important;

	}

	// --------------------------------------------
	.fixed {
		z-index: 20;
		width: 100%;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 2px rgba(32, 37, 64, 0.06);
		padding: 12rpx 32rpx;
		position: fixed !important;
	}

	.screen {
		padding-top: 140rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-around;

		.location {
			display: flex;
		}

		.u-icon {
			margin-left: 10rpx;
			padding-top: 4rpx;
		}

	}

	.state-box {
		margin: 0 32rpx 48rpx 32rpx;
		padding: 48rpx 32rpx 32rpx 32rpx;
		// height: 450rpx;

		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

		.bottom {
			margin-bottom: 32rpx;

			view {
				margin-bottom: 32rpx;
			}
		}

		.information {
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
		}

		.headline {
			height: 38rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 38rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
			vertical-align: top;

		}

		#state-show {
			width: 130rpx;
			height: 44rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 44rpx;
			margin-right: 20rpx;
		}

		.FINISHED {
			background-color: #e8f4ff;
			color: #1890ff;
		}

		.VERIFYING {
			background-color: #e7faf0;
			color: #81d2ad;
		}

		.REPAIRING {
			background-color: #ffeded;
			color: #ff4949;
		}

		.RECEIVING {
			background-color: #fff8e6;
			color: #ffba00;
		}

		.PREPARE {
			background-color: #cdad99;
			color: #909399;
		}

		.ERROR {
			background-color: #ffeded;
			color: #ff4949;
		}

		.SUCCESS {
			background-color: #e7faf0;
			color: #13ce66;
		}

		.button-da {
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			margin-bottom: 0 !important;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 64rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			vertical-align: top;
		}

		.verification {
			width: 622rpx;

		}

		.report {
			width: 395rpx;
		}

		.button-xiao {
			width: 202rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.send-back {
			width: 202rpx;
			border: 1px solid rgba(255, 87, 51, 1);
			color: rgba(255, 87, 51, 1);
		}

		.dispatch {
			width: 202rpx;
			border: 1px solid #38bdff;
			color: rgba(32, 37, 64, 1);
		}
	}

	// 验证单选框哪里的样式
	::v-deep .verify {
		margin-bottom: 20rpx;

		.u-form-item__body__left__content__required {
			left: 24rpx !important;
		}

		.u-form-item__body__right {
			margin-right: 32rpx;
		}

		.u-radio-group--row {
			justify-content: space-between;
		}

		.u-radio {
			margin-bottom: 0px !important;
		}

		.u-radio__icon-wrap {
			margin-left: 32rpx;
		}

	}








	// 俩个按钮对齐样式
	.two-button {
		margin: 48rpx 32rpx 0 32rpx;
		display: flex;
		justify-content: space-between;

		view {
			width: 300rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.button-left {
			border: 1px solid #38AFFF;
			color: #202540;
		}

		.button-right {
			background: linear-gradient(90deg, #38DEFF 0%, #38AFFF 100%);
			color: #FFFFFF;
		}
	}




	// 文本域样式
	::v-deep .u-textarea--radius {
		border-radius: 10px !important;
		background: #fbfbfb !important;
	}

	::v-deep .u-popup__content {
		width: 686rpx;
		height: 592rpx;
		opacity: 1;
		border-radius: 10px;
		background: rgba(255, 255, 255, 1);

	}
</style>